<!--
 * @Description: 甘特图
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2021-11-10 09:51:38
 * @LastEditTime: 2022-12-23 11:04:36
 * @FilePath: \cscec-pms-admin\src\components\GanttModal\index.vue
-->
<template>
  <div>
    <DragModal
      ref="modal"
      title="项目总计划甘特图"
      :visible="visible"
      width="80%"
      destroy-on-close
      @cancel="handleModalCancel"
    >
      <a-spin :spinning="loading">
        <div class="gantt-wrapper">
          <div class="gantt-btn">
            <a-button
              :disabled="dimension>=3"
              type="primary"
              @click="dimension ++"
            >
              放大
            </a-button>
            <a-button
              :disabled="dimension<=1"
              type="primary"
              @click="dimension --"
            >
              缩小
            </a-button>
          </div>
          <div class="gantt-content">
            <DpiGantt
              :scales="scales"
              :task-list="taskList"
              :lines="lines"
              :columns="columns"
              :regions="regions"
              @contentEvent="contentEvent"
            />
          </div>
        </div>
      </a-spin>
      <template slot="footer">
        <a-button
          :disabled="loading"
          @click="handleModalCancel"
        >
          关闭
        </a-button>
      </template>
    </DragModal>
    <div
      v-show="infoVisible"
      ref="nodeInfo"
      class="node-info"
      :style="{'left':infoData.x+'px','top':infoData.y+'px'}"
    >
      <p>
        <b>名称：</b>
        <span>{{ infoData.text }}</span>
      </p>
      <p>
        <b>管控级别：</b>
        <span>{{ infoData.controlLevelId }}</span>
      </p>
      <p>
        <b>周期：</b>
        <span>{{ infoData.period }}</span>
      </p>
      <p>
        <b>计划开始时间：</b>
        <span>{{ infoData.planStartTime }}</span>
      </p>
      <p>
        <b>计划完成时间：</b>
        <span>{{ infoData.planEndTime }}</span>
      </p>
      <p>
        <b>直接责任人：</b>
        <span>{{ infoData.directResPerList.map(el=>el.label).join(',') }}</span>
      </p>
    </div>
  </div>
</template>
<script>
import DragModal from '@/components/DragModal'
import { DpiGantt } from 'dpi-plugins'
import 'dpi-plugins/lib/DpiPlugins.css'
export default {
  name: 'GanttModal',
  props: {
    // 隐藏显示
    visible: {
      type: Boolean,
      require: true
    },
    // 甘特图数据
    data: {
      type: Object,
      require: true
    }
  },
  components: {
    DragModal,
    DpiGantt
  },
  data() {
    return {
      // 开始时间，固定格式
      // startDate: '',
      // 结束时间，固定格式
      // endDate: '',
      // 时间维度，目前支持以下三种配置
      // 时间轴维度
      dimension: 3,
      // format 的 y m d 分别代表 年 月 日
      // scales: [
      //   {
      //     unit: 'year'
      //     // format: (y) => y, //  默认方法，参数为 年
      //   },
      //   {
      //     unit: 'month',
      //     format: (y, m) => `${m}月` //
      //     // format: (y, m) => m, //  默认方法，参数为 年月
      //   },
      //   {
      //     unit: 'day'
      //     // format: (y, m, d) => d, //  默认方法，参数为 年月日
      //   }
      // ],
      // 任务列表
      taskList: [],
      // 滑块的连接线
      lines: [
        // {
        //   from: 'b', //  起点滑块 id
        //   to: 'd', //  终点滑块 id
        //   type: 'start-end' //  连线类型，分为 start-start start-end end-start end-end 四种
        // }
      ],
      // 甘特图区的进度滑块
      regions: [],
      // 任务列
      columns: [
        {
          text: '编号',
          key: 'sortNum', //  唯一 key，表示展示 taskList 中的哪个字段
          align: 'center', //  对齐方式，用于 text-align 默认左对齐
          width: '80px' //  宽度，直接作用于 width 上
        },
        {
          text: '阶段/类别',
          key: 'phaseCategory'
        }
      ],
      // 节点信息显示隐藏
      infoVisible: false,
      // 节点信息
      infoData: {
        x: 0,
        y: 0,
        text: '',
        controlLevelId: '',
        period: '',
        planStartTime: '',
        planEndTime: '',
        directResPerList: []
      },
      // 加载
      loading: true
    }
  },
  computed: {
    scales() {
      const list = [
        {
          unit: 'year'
          // format: (y) => y, //  默认方法，参数为 年
        },
        {
          unit: 'month',
          format: (y, m) => `${m}月` //
          // format: (y, m) => m, //  默认方法，参数为 年月
        },
        {
          unit: 'day'
          // format: (y, m, d) => d, //  默认方法，参数为 年月日
        }
      ]
      return list.filter((el, index) => {
        if (index <= this.dimension - 1) {
          return el
        }
      })
    }
  },
  watch: {
    visible: {
      handler(v) {
        if (v) {
          setTimeout(() => {
            this.loading = true
            const { list, lines } = this.data
            this.taskList = list
            this.lines = lines
            this.regions = list
            this.$nextTick(() => {
              this.loading = false
            })
          }, 100)
        } else {
          // this.startDate = ''
          // this.endDate = ''
          this.taskList = []
          this.lines = []
          this.regions = []
          this.loading = true
        }
      }
    }
  },
  methods: {
    /**
     * @description: 滑块事件
     * @param {Event} event 事件对象
     * @param {object} info 滑块数据
     * @return {void}
     */
    contentEvent(e, info) {
      const { text, controlLevelId, period, planStartTime, planEndTime, directResPerList } = info
      // 鼠标移入滑块
      if (e.type === 'mouseenter') {
        this.infoVisible = true
        this.infoData = {
          x: e.x + 20,
          y: e.y + 20,
          text,
          controlLevelId,
          period,
          planStartTime,
          planEndTime,
          directResPerList: directResPerList || []
        }
      }
      if (e.type === 'mouseleave') {
        this.infoVisible = false
      }
    },
    /**
     * @description: 关闭模态框
     * @param {void}
     * @return {void}
     */
    handleModalCancel() {
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang="less" scoped>
.gantt-wrapper {
  height: calc(var(--heightVh) * 0.7 - 76px);
}
.gantt-btn {
  .ant-btn {
    margin-right: 10px;
  }
}
.gantt-content {
  height: calc(100% - 42px);
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}
.node-info {
  position: fixed;
  background-color: #fff;
  box-shadow: 0 0 10px 0 #ccc;
  border-radius: 5px;
  padding: 10px;
  max-width: 300px;
  z-index: 9999;
  p {
    margin: 0;
  }
}
</style>
